<template>
  <div class='container'>
      <el-card class="box-card">
        <!-- 从学科进入的面包屑 -->
          <el-breadcrumb separator-class="el-icon-arrow-right" v-if="$route.query.id">
              <el-breadcrumb-item>学科管理</el-breadcrumb-item>
              <el-breadcrumb-item>大数据</el-breadcrumb-item>
              <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>

          <el-form :inline="true" >
              <el-col :span="18">
                  <el-form-item label="目录名称">
                      <el-input v-model="searchName"></el-input>
                  </el-form-item>
                  <el-form-item label="状态" style="width: 290px;" class="statebtn">
                      <el-select v-model="queryInfo.state"> 
                          <el-option label="启用" value="1"></el-option>
                          <el-option label="禁用" value="0"></el-option> 
                      </el-select>
                  </el-form-item> 
                  <!-- 左侧按钮 -->
                  <el-form-item>
                      <el-button @click="clearSearcher">清除</el-button>
                      <el-button type="primary" @click="searchBtn">搜索</el-button>
                  </el-form-item>
            </el-col>
            <el-col :span="6" style="text-align: right;">
                <el-button type="text" class="el-icon-back" @click="changesLink" v-if="$route.query.id">返回学科</el-button>
                <el-button type="success" icon="el-icon-edit" @click="addMenuFormBtn" class="menubtn">新增目录</el-button>        
            </el-col>
        </el-form>
          
        <!-- 警告 -->
        <el-alert
            type="info"
            show-icon>
            <span slot="title">数据一共{{total}}条</span>
        </el-alert>

          <!-- 表格 -->
        <el-table :data="directorysFormList">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="所属学科"  prop="subjectName"></el-table-column>
            <el-table-column label="目录名称"  prop="directoryName"></el-table-column>
            <el-table-column label="创建者"  prop="username" ></el-table-column>
            <el-table-column label="创建日期" width="152px">
                <template slot-scope="scope">
                    {{scope.row.addDate|parseTimeByString}}
                </template>
            </el-table-column>
            <el-table-column label="面试题数量"  prop="totals"></el-table-column>
            <el-table-column label="状态" prop="state">
                <template slot-scope="scope">
                    <span type="info" v-if="scope.row.state==0" >已禁用</span>
                    <span type="info" v-else>已启用</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"  width="150px">
                <template slot-scope="scope">
                    <el-link type="primary"  @click="changeBtn(scope.row)"  :underline="false">{{scope.row.state==0?'启用':'禁用'}}</el-link>
                    <el-link v-if="scope.row.state==0" type="info" plain disabled :underline="false" @click="editFormvisible(scope.row)">修改</el-link>
                    <el-link v-else type="primary" plain :disabled="scope.row.state==0"  :underline="false" @click="editFormvisible(scope.row)">修改</el-link>
                   
                    <el-link v-if="scope.row.state==0" type="info" plain disabled :underline="false" @click="removeFormDataById(scope.row)">删除</el-link>
                    <el-link v-else type="primary" plain :disabled="scope.row.state==0"  :underline="false" @click="removeFormDataById(scope.row)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
    <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[5,10,20,50]"
          :page-size="queryInfo.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="total" background>     
        </el-pagination>
    </el-card>
      <!--新增目录 对话框 -->
    <el-dialog title="新增目录" :visible.sync="addMenuFormVisible" width="400px"  @close="addMenuFormClose">
        <el-form ref="addMenuFormRef" :rules="MenuFormRules" :model="stateList">
            <el-form-item label="所属学科" label-width="80px"  v-if="!$route.query.id" > 
                <el-select v-model="value" placeholder="请选择" class="labelitem">
                    <el-option
                        v-for="item in MenuForm"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="目录名称" label-width="80px" prop='directoryName'>
                <el-input v-model="stateList.directoryName" width="280px"></el-input>
            </el-form-item>  
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addMenuFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addMenuFormSure">确 定</el-button>
        </div>
    </el-dialog> 

    <!-- 修改目录 对话框 -->
     <el-dialog
      title="修改目录"
      :visible.sync="editMenuFormVisible"
      @close="editMenuFormClose" 
      width="400px" >
          <el-form ref="editMenuFormRef" :rules="MenuFormRules" :model='detailMenu'>
              <el-form-item label="所属学科" label-width="80px" v-if="!$route.query.id"> 
                  <el-select v-model="detailMenu.subjectID" placeholder="请选择"  class="labelitem">
                      <el-option
                          v-for="item in MenuForm"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="目录名称" label-width="80px" prop='directoryName'>
                  <el-input v-model="detailMenu.directoryName" width="280px"></el-input>
              </el-form-item>  
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="editMenuFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="editMenuFormSure">确 定</el-button>
          </span>
      </el-dialog> 
  </div>
</template>

<script>
import {list,detail,add,update,remove,changeState} from '@/api/hmmm/directorys.js'
import {simple} from '@/api/hmmm/subjects.js'
import {parseTimeByString} from '@/filters/index.js'

export default {
  name:'directorys',
  data(){
    return{
      queryInfo:{
        page:1,
        pagesize:10,
        directoryName:'',
        subjectID:""
      },
      total:0,
      directorysFormList:[],
      stateList:{
        subjectID:'',
        directoryName:''
      },
      MenuForm:[],
      value:'',
      addMenuFormVisible:false,
      editMenuFormVisible:false,
      detailMenu:{
        subjectID:'',
        subjectName:'',
        directoryName:''
      },
    // 新增目录验证表单
      MenuFormRules: {
        directoryName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }]
      },
      searchName:''
      
      }
  },

  methods:{
     async getdirectorysFormList(){
       if(this.$route.query.id){
         this.queryInfo.subjectID=this.$route.query.id
       }else{
          delete  this.queryInfo.subjectID
       }

        try{
          const {data}= await list(this.queryInfo)
          console.log(data);
          this.directorysFormList=data.items
          this.total=data.counts
          }catch(err){
              console.log('获取失败',err);
          }
      },
      
      // 清除按钮
      clearSearcher(){
        this.queryInfo.directoryName='',
        this.searchName = "";
        this.queryInfo.state=null
        this.getdirectorysFormList()
        this.queryInfo.page = 1;
      },

      // 搜索按钮
      searchBtn(){
        this.queryInfo.subjectName = this.searchName;
        this.getdirectorysFormList();
        this.queryInfo.page = 1;
      },

      // 学科列表
      async getaddMenuForm(){
          try{
            const {data}=await simple()
            this.MenuForm=data
            console.log(this.MenuForm);
          }catch(err){
              console.log('获取学科简单列表失败',err);
          }
      },

      // 新增目录
      addMenuFormBtn(){
        this.addMenuFormVisible=true
      },

      addMenuFormClose(){
        this.$refs.addMenuFormRef.resetFields()
        this.selectedKeys=[]
      },

      // 确认新增目录 
      addMenuFormSure(){
        //  v-if="!$route.query.id"
        if(this.$route.query.id){
          this.stateList.subjectID=this.$route.query.id
          console.log(this.stateList.subjectID);
        }else{
          this.stateList.subjectID=this.value
          console.log(this.stateList);
        }
          this.$refs.addMenuFormRef.validate( async valid=>{
            if (!valid) return this.$message.error('请填写正确的表单')    
           try{       
             const {data}=await add(this.stateList)
            console.log(this.stateList);
            this.addMenuFormVisible=false
             this.getdirectorysFormList()
           }catch(err){
                console.log('新增表单失败',err);
           }
        })
      },
   
      // 修改目录按钮
      async editFormvisible(id){
        // console.log(row);
        this.editMenuFormVisible=true
        try{
          const {data}=await detail(id)
          console.log(data);
          this.detailMenu=data
        }catch(err){
          console.log('获取详细列表失败',err);
        }       
      },

      // 修改目录的关闭按钮
        editMenuFormClose(){
          this.selectedKeys=[]
        },

      // 确认修改
     editMenuFormSure(){
      //  console.log(this.detailMenu);
        this.$refs.editMenuFormRef.validate( async valid=>{
            if (!valid) return this.$message.error('请填写正确的表单')   
        try{
            const {data}=await update(this.detailMenu)
            console.log(data);
            this.editMenuFormVisible=false
             this.getdirectorysFormList()
          
          }catch(err){
              console.log('修改数据失败',err);
          }
        })
      }, 

      // 删除按钮
      async removeFormDataById(row){
        const confirmResult= await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if (confirmResult!=='confirm') return this.$message.info('取消删除操作')
        try{
          const {data}=await remove(row)
          console.log(data);
            this.$message.success('删除成功')
            this.getdirectorysFormList()
        }catch(err){
            this.$message.error('删除失败')
        }
      },

      // 禁用和启用之间的切换
      async changeBtn(row){
        row.state = row.state==1? 0:1
        const res = await changeState(row)
        // console.log(res);
        this.getdirectorysFormList()
      },

      // 返回学科
      changesLink(){
        this.$router.push('/subjects/list')
      },
      handleCurrentChange(newpage){
        this.queryInfo.page=newpage
        this.getdirectorysFormList()
      },
      handleSizeChange(newsize){
        this.queryInfo.pagesize=newsize
        this.getdirectorysFormList()
      },  
  },

  created(){
        this.getdirectorysFormList()
        this.getaddMenuForm()
  },

  watched(){},
  computed:{}

}
</script>

<style scoped lang='less'>
.el-card{
  margin: 10px;
}
.el-link{
  padding-right: 10px;
}
.el-pagination{
  text-align: right
}
.el-table {
  margin-top: 20px;
}
.el-form-item[data-v-60dec6f3]:nth-child(2){
  margin-left: 0px;
}
.el-breadcrumb{
  border-bottom: 1px solid #eee;
  height: 25px;
  line-height: 20px;
  padding-bottom: 30px;
  margin-bottom:20px;
}
.el-breadcrumb_inner{
  font-size: 18px;
  color: #eee;
}
.menubtn{
  margin-right: 0;
}
.statebtn{
  text-align: right;
}
.labelitem{
  width: 280px!important;
}

</style>
